<template>
	<div class="wrapper">
		<div>
			<div class="hotcity">
				<div class="hotcity-top">
					<p>热门城市</p>
				</div>
				<ul class="citylist-hot">
					<li class="cityitem-hot" @click="cityName(item.name)" v-for="item in hotCities">{{ item.name }}</li>
				</ul>
			</div>
			<!-- sort -->
			<div class="sort">
				<div class="citysort-top">
					<p>字母排序</p>
				</div>
				<ul class="sortlist">
					<li class="sortitem" @click="locatlionCity(key)" v-for="val,key in cities">{{ key }}</li>
				</ul>
				<div class="citysort-bottom">
					<div v-for="val,key in cities">
						<p :ref="key">{{ key }}</p>
						<ul class="citylist">
							<li class="cityitem" @click="cityName(items.name)" v-for="items in val">{{ items.name }}</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	import BScroll from 'better-scroll'
	import { mapMutations } from "vuex"
	export default{
		props:["hotCities","cities"],
		data(){
			return{
				scroll:''
			}
		},
		mounted(){
			const wrapper = document.querySelector('.wrapper')
			this.scroll = new BScroll(wrapper,{
				click:true
			})
		},
		methods:{
			locatlionCity(key){
				this.scroll.scrollToElement(this.$refs[key][0])
			},
			cityName(city){
				this.changeCity(city)
				this.$router.push({
					name:"home"
				})
			},
			...mapMutations(["changeCity"])
		}

	}
</script>
<style scoped>
	.wrapper{
		position: absolute;
		top:.88rem;
		left: 0;
		right:0;
		bottom:0;
		overflow: hidden;
		background-color: #f5f5f5;
	}
	.citysort-top{
		font-size: .24rem;
   		margin: .24rem .3rem;
	}
	.sortlist{
		background-color: #fff;
		display: flex;
		flex-wrap:wrap;
	}
	.sortitem{
		width: 16.66666%;
		text-align: center;
		font-size: .28rem;
		color: #212121;
		line-height: .88rem;
	}
	.citysort-bottom p{
		font-size: .24rem;
   		margin: .24rem .3rem;
	}
	.citylist{
		display: flex;
		flex-wrap:wrap;
		background-color: #fff;
		text-align: center;
		font-size: .28rem;
		color: #212121;
		line-height: .9rem;
		position: relative;
	}
	.cityitem{
		width: 25%;
		border-bottom: .02rem solid #ddd;
		overflow:hidden;
	    text-overflow:ellipsis;
	    white-space:nowrap;
	    position: relative;
	}
	.citylist:before{
	    content: '';
	    position: absolute;
	    width:25%;
	    left: 25%;
	    height: 100%;
	    border-left: .02rem solid #ddd;
	    border-right: .02rem solid #ddd;
	}
	.citylist:after{
	    content: '';
	    position: absolute;
	    width: 0;
	    left: 75%;
	    height: 100%;
	    border-left: .02rem solid #ddd;
	    border-right: 0;
	}



	.hotcity-top{
		line-height: .24rem;
		font-size: .24rem;
   		margin: .24rem .3rem;
	}
	.citylist-hot{
		background-color: #fff;
		display: flex;
		flex-wrap:wrap;
		position: relative;
	}
	.citylist-hot:before{
	    content: '';
	    position: absolute;
	    width:33.333%;
	    left: 33.333%;
	    height: 100%;
	    border-left: .02rem solid #ddd;
	    border-right: .02rem solid #ddd;
	}
	.cityitem-hot{
		width: 33.33333%;
		text-align: center;
		font-size: .28rem;
		color: #212121;
		line-height: .9rem;
	    border-bottom: .02rem solid #ddd;
	    position: relative;
	}
</style>